<script setup lang="ts">
import { onUnmounted } from 'vue';

const props: any = defineProps<{
    ujt: any;
    id?: string;
    popstyle?: any;
    maskstyle?: any;
}>();
const { $global } = props.ujt;
// 初始化pop数据
if (!props.id) {
    props.id = 'popdefaultmod';
}
if (!$global.pop[props.id]) {
    $global.pop[props.id] = {};
}
if (!$global.pop[props.id]?.zindex) {
    $global.pop[props.id].zindex = 101;
}
if (!$global.pop[props.id]?.popstyle) {
    if (props?.popstyle) {
        $global.pop[props.id].popstyle = props.popstyle;
    } else {
        $global.pop[props.id].popstyle = {
            top: 0,
            right: 0,
            width: '180px',
            height: '100vh',
            'background-color': '#ffffff88',
        };
    }
}
if (!$global.pop[props.id]?.maskstyle) {
    if (props?.maskstyle) {
        $global.pop[props.id].maskstyle = props.maskstyle;
    } else {
        $global.pop[props.id].maskstyle = {
            'background-color': 'rgba(0, 0, 0, 0.02)',
        };
    }
}
onUnmounted(() => {
    $global.pop[props.id] = {};
});
</script>

<template>
    <template v-if="$global.pop[props.id].stat">
        <div
            class="as-pop-mod-mask"
            :style="$global.pop[props.id].maskstyle"
            @pointerdown="$global.pop[props.id].stat = 0"
        ></div>
        <div class="as-pop-mod-pop" :style="$global.pop[props.id].popstyle">
            <slot></slot>
        </div>
    </template>
</template>

<style scoped lang="scss">
.as-pop-mod-mask {
    position: fixed;
    top: 0;
    left: 0;
    z-index: v-bind('$global.pop[props.id].zindex - 1');
    width: 100vw;
    height: 100vh;
    overflow: hidden;
}
.as-pop-mod-pop {
    position: fixed;
    z-index: v-bind('$global.pop[props.id].zindex');
}
</style>
